<script setup>
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { getAuthCode } from '@/api/login'
	
	const user = useUserStore()
	const config = getApp().globalData.config
	let timeInterval = null
	const loginForm = ref({
		phone: "",
		captchaCode: "",
		code: ""
	})
	const codeTime = ref(0)
	const agree = ref(false)
	const loading = ref(false)
	
	function getCode() {
		if(codeTime.value <= 0) {
			var reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
			if (loginForm.value.phone === "") {
				uni.showToast({
					icon: 'error',
					title: '请输入手机号'
				})
			} else if (reg.test(loginForm.value.phone)) {
				getAuthCode(loginForm.value.phone).then(res => {
					uni.showToast({
						icon: 'success',
						title: '验证码发送成功'
					})
					codeTime.value = 60
					timeInterval = setInterval(() => {
						codeTime.value -= 1
						if (codeTime.value <= 0) {
							clearTime()
						}
					}, 1000)
				}).catch((err) => {
					if(err.msg) {
						uni.showToast({
							icon: 'error',
							title: err.msg
						})
					}
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: '手机号码不合法'
				})
			}
		}
	}
	function clearTime() {
		if(timeInterval) {
			clearInterval(timeInterval)
			timeInterval = null
		}
	}
	function msgLogin(){
		var reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
		if (loginForm.value.phone === "") {
			uni.showToast({
				icon: 'error',
				title: '请输入手机号'
			})
		} else if (!reg.test(loginForm.value.phone)) {
			uni.showToast({
				icon: 'error',
				title: '手机号码不合法'
			})
		} else if (loginForm.value.captchaCode === "") {
			uni.showToast({
				icon: 'error',
				title: '请输入验证码'
			})
		} else if (!agree.value) {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意《用户协议》和《隐私政策》'
			})
		} else {
			phoneLogin()
		}
	}
	function phoneLogin() {
		uni.login({
			provider: 'weixin',
			success: (e) => {
				loginForm.value.code = e.code
				loading.value = true
				user.loginAction({mobile: loginForm.value}).then(res => {
					user.getInfoAction().then(res => {
						loading.value = false
						uni.navigateBack({delta: 2})
					}).catch(() => loading.value = false)
				}).catch(() => loading.value = false)
			}
		})
	}
	function checkboxChange(e) {
		let values = e.detail.value || []
		agree.value = values.length > 0 && values[0]
	}
	function viewAgreement() {
		uni.navigateTo({
			url: '/pages/user/protocolConsumer'
		})
		// let site = config.appInfo.agreements[1]
		// uni.navigateTo({
		// 	url: `/pages/webview?title=${site.title}&url=${site.url}`
		// })
	}
	function viewPrivacy() {
		uni.navigateTo({
			url: '/pages/user/protocolPrivacy'
		})
		// let site = config.appInfo.agreements[0]
		// uni.navigateTo({
		// 	url: `/pages/webview?title=${site.title}&url=${site.url}`
		// })
	}
	
	onLoad(() => {
	 
	})
	onUnload(() => {
		clearTime()
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<image :src="config.appInfo.logo" class="icon" mode="aspectFill"></image>
			<text class="main-text">相宴</text>
			<text class="sub-text">智慧乡宴服务平台</text>
		</view>
		<view class="app-content">
			<view class="input-item">
				<input v-model="loginForm.phone" class="input" type="number" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="input-item">
				<input v-model="loginForm.captchaCode" class="input" placeholder="请输入验证码" maxlength="6" />
				<view class="code-btn" @click="getCode">{{codeTime <= 0 ? '获取验证码' : codeTime + 's后失效'}}</view>
			</view>
			<view class="agree">
				<checkbox-group @change="checkboxChange">
				    <label class="select"><checkbox color="#FF3E49" class='select-check' :checked="agree" value="true" /></label>
				</checkbox-group>
				<view class="agree-text">
					<text>我已阅读并同意</text>
					<text class="text-primary" @click.stop="viewAgreement">《用户协议》</text>
					<text>和</text>
					<text class="text-primary" @click.stop="viewPrivacy">《隐私政策》</text>
				</view>
			</view>
			<uv-button color="#FF3E49" shape="circle" size="large" text="登  录" @click="msgLogin" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container {
		height: 100%;
		color: #000000;
		font-size: 28rpx;
		padding-top: 110rpx;
		.app-head{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: 600;
			letter-spacing: 4rpx;
			.icon{
				width: 176rpx;
				height: 176rpx;
				border-radius: 36rpx;
				background-color: #faf7f7;
			}
			.main-text{
				margin-top: 24rpx;
				line-height: 56rpx;
				font-size: 48rpx;
			}
			.sub-text{
				margin-top: 8rpx;
				line-height: 42rpx;
				font-size: 36rpx;
			}
		}
		.app-content {
			padding: 32rpx 74rpx 0;
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			.input-item {
				height: 104rpx;
				background-color: #EFEFEF;
				border-radius: 52rpx;
				padding: 0 48rpx;
				display: flex;
				align-items: center;
				.input {
					flex: 1;
					font-size: var(--theme-lg);
				}
				.code-btn{
					flex-shrink: 0;
					color: #F92E1D;
				}
			}
			.agree{
				display: flex;
				align-items: center;
				gap: 6rpx;
				.select-check{
					transform: scale(0.6);
				}
				.agree-text{
					font-size: var(--theme-sm);
					color: #292929;
					.text-primary{
						color: #FD1024;
					}
				}
			}
		}
	}
</style>